<template>
  <div class="actuation-content">
    <div class="left-menu">
      <el-tabs v-model="actuationName" @tab-click="changeSelectActuation">
        <el-tab-pane v-for="status in actuationStatus" :key="status.desc" :label="status.name" :name="status.desc">
          <div :class="status.desc">
            <div>
              <el-input placeholder="输入患者姓名" suffix-icon="el-icon-search" v-model="searchPatient"/>
            </div>
            <div @click="selectActuation(item)" class="actuation-item" :class="{'actuation-item--active':selectedActuation.id==item.id}" v-for="item in actuationList" :key="item.id">
              <div class="actuation-title">
                <div>
                  <span>{{ item.id }}</span>
                  <span class="user-name">{{ item.name }}</span>
                </div>
                <div class="actua-status">
                  <span>{{ item.date }}</span>
                  <span class="actua-details">{{ item.status }}</span>
                </div>
              </div>
              <div class="actuation-desc">{{ item.diagnose }}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="right-body">
      <div class="title">
        <div class="title-left">
          <span class="t1">项目执行</span>
          <span class="t2">已收费</span>
        </div>
        <div class="title-right">
          <span class="t1" @click="beginOrder">开执行单</span>
          <span class="t2">打印</span>
        </div>
      </div>
      <div class="patient-info">
        <div>
          <span class="s1">{{selectedActuation.name}}</span>
          <span class="s2">男 22岁 13566666666</span>
        </div>
        <div>
          <el-input placeholder="输入患者姓名" suffix-icon="el-icon-search" v-model="searchPatient"/>
        </div>
      </div>
      <div class="diagnose-table">
        <div class="table">
          <el-table :data="diagnoseData" border header-cell-class-name="content-table-title">
            <el-table-column type="index"/>
            <el-table-column prop="diagnose" label="诊断"></el-table-column>
            <el-table-column prop="doctor" label="诊断医师"></el-table-column>
            <el-table-column prop="date" label="诊断时间"></el-table-column>
            <el-table-column label="金额">
              <template slot-scope="item">
                <span>¥{{ item.row.amount.toFixed(2) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="item">
                <i class="status"></i><span>{{ item.row.status }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="medicine-table">
        <div class="table">
          <div class="table-title">
            <div class="no"></div>
            <div class="title-width">项目</div>
            <div class="title-width">类型</div>
            <div class="title-width">单价</div>
            <div class="title-width">金额</div>
            <div class="title-width">已执行/总数</div>
            <div class="title-width">操作</div>
          </div>
          <div class="table-content">
            <div v-for="(item,index) in medicineData" :key="index">
              <div class="item">
                <div class="no">{{ index + 1 }}</div>
                <div class="title-width">{{ item.project }}</div>
                <div class="title-width">{{ validateNull(item.items) ? item.type : '' }}</div>
                <div class="title-width">{{ item.price }}</div>
                <div class="title-width">{{ item.amount }}</div>
                <div class="title-width">{{ item.total }}</div>
                <div v-if="selectedActuation.statusCode=='wait'"  @click="execute(item)" class="title-width operation">{{ !validateNull(item.items) ? '' : '执行' }}</div>
                <div v-else-if="selectedActuation.statusCode=='history'" @click="viewDetails(item)" class="title-width operation">{{ !validateNull(item.items) ? '' : '查看详情' }}</div>
              </div>
              <div class="item" v-for="(child,cindex) in item.items" :key="cindex">
                <div class="no"></div>
                <div class="title-width" style="color: rgba(0,0,0,0.45);">{{ child.project }}</div>
                <div class="title-width">{{ child.type }}</div>
                <div class="title-width">{{ child.price }}</div>
                <div class="title-width">{{ child.amount }}</div>
                <div class="title-width">{{ child.total }}</div>
                <div v-if="selectedActuation.statusCode=='wait'" @click="execute(child)" class="title-width operation">执行</div>
                <div v-else-if="selectedActuation.statusCode=='history'" @click="viewDetails(child)" class="title-width operation">查看详情</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <execute-dialog ref="executeDialog" :executeData="executeItem"/>
    <execute-details ref="executeDetails"/>
  </div>
</template>

<script>
import ExecuteDialog from '@/views/actuation/dialog/executeDialog'
import ExecuteDetails from '@/views/actuation/dialog/executeDetails'
import { validatenull } from '@/utils/validate'

export default {
  name: 'home',
  components: { ExecuteDetails, ExecuteDialog },
  data () {
    return {
      actuationName: 'wait',
      searchPatient: '',
      actuationStatus: [
        { name: '待执行', desc: 'wait' }, { name: '已执行', desc: 'history' }, { name: '全部', desc: 'all' }
      ],
      executeItem: {},
      selectedActuation: {},
      actuationList: [],
      diagnoseData: [],
      medicineData: [
        { id: 1, project: '开药', type: '处方', price: 200, amount: 200, total: '1/1' },
        { id: 2, project: '中医体质检测', type: '检查检测', price: 200, amount: 200, total: '1/1' },
        {
          id: 3,
          project: '脏腑气机调衡(套餐)',
          type: '处方',
          price: 200,
          amount: 200,
          total: '1/1',
          items: [{ id: 4, project: '中医体质检测', type: '检查检测', price: 200, amount: 200, total: '1/1' }]
        }
      ]
    }
  },
  created () {
    for (let i = 0; i < 6; i++) {
      this.actuationList.push(
        {
          id: i + 1,
          name: '李涵' + i,
          statusCode: 'wait',
          status: '待执行',
          diagnose: '虚劳' + i,
          date: '02/0' + (i + 1)
        }
      )
    }
    this.selectedActuation = this.actuationList[0]
    this.diagnoseData = [{ diagnose: '虚劳，高血压', doctor: '李丽', date: '2021-01-23', amount: 200, status: this.selectedActuation.status }]
  },
  methods: {
    changeSelectActuation (tab) {
      this.actuationList = []
      const statusCode = tab.name
      const status = tab.label
      for (let i = 0; i < 6; i++) {
        this.actuationList.push(
          {
            id: i + 1,
            name: '李涵' + i,
            statusCode: statusCode !== 'all' ? statusCode : (i % 2 === 0 ? 'history' : 'wait'),
            status: statusCode !== 'all' ? status : (i % 2 === 0 ? '已执行' : '待执行'),
            diagnose: '虚劳' + i,
            date: '02/0' + (i + 1)
          }
        )
      }
      this.selectedActuation = this.actuationList[0]
      this.diagnoseData = [{ diagnose: '虚劳，高血压', doctor: '李丽', date: '2021-01-23', amount: 200, status: this.selectedActuation.status }]
    },
    selectActuation (item) {
      this.selectedActuation = item
      this.diagnoseData = [{ diagnose: '虚劳，高血压', doctor: '李丽', date: '2021-01-23', amount: 200, status: this.selectedActuation.status }]
    },
    execute (item) {
      this.executeItem = item
      this.$refs.executeDialog.show()
    },
    viewDetails () {
      this.$refs.executeDetails.show(this.selectedActuation)
    },
    beginOrder () {
      this.$router.push('/actuation/begin')
    },
    validateNull (val) {
      return validatenull(val)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables";

.actuation-content {
  display: flex;

  .left-menu {
    width: 20%;
    background: #fff;
    padding: 10px 20px;
    margin: 10px;

    .wait, .history, .all {
      .actuation-item--active{
        border: 1px solid $mainBg;
        box-shadow: 2px 0 6px rgba(0,21,41,.15);
      }
      .actuation-item{
        margin-top: 15px;
        cursor: pointer;
        .actuation-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 15px;
          background: #F5FBFF;

          .user-name {
            margin-left: 10px;
            color: rgba(0, 0, 0, 0.70);
          }
          .actua-status{
            font-size: 12px;
            color: rgba(0,0,0,0.45);
            .actua-details{
              margin-left: 10px;
              color: #F59C2E;
            }
          }
        }

        .actuation-desc {
          color: #7b7d82;
          padding: 10px 15px;
        }
      }
    }
  }

  .right-body {
    width: 80%;
    margin: 10px;

    .title {
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 20px 30px;

      .title-left {
        letter-spacing: 0;
        font-weight: 500;

        .t1 {
          font-size: 16px;
          color: rgba(0, 0, 0, 0.70);
        }

        .t2 {
          display: inline-block;
          font-size: 12px;
          color: #94E193;
          border: 1px solid #94E193;
          padding: 2px 15px;
          transform: rotate(20deg) translate(25px, 5px);
        }
      }

      .title-right {
        .t1 {
          background: $mainBg;
          border-radius: 2px;
          padding: 6px 10px;
          color: #FFF;
          cursor: pointer;
        }

        .t2 {
          margin-left: 10px;
          border: 1px solid $mainBg;
          border-radius: 2px;
          padding: 5px 20px;
          color: $mainBg;
          cursor: pointer;
        }
      }
    }

    .patient-info {
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 30px;
      .s1{font-size: 15px}
      .s2{
        color: #7b7d82;
        margin-left: 10px;
      }
    }

    .diagnose-table {
      background: #fff;
      margin-top: 16px;
      padding: 20px;
      .table {
        .status {
          width: 6px;
          height: 6px;
          background: #FFBD72;
          display: inline-block;
          border-radius: 6px;
          margin-right: 5px;
        }
      }
    }

    .medicine-table {
      background: #fff;
      margin-top: 16px;

      .table {
        padding: 20px;

        .no {
          width: 7%;
          text-indent: 16px;
        }

        .title-width {
          width: 15.5%;
        }

        .operation{
          color: #43ade9;
          cursor: pointer
        }

        .table-title {
          color: #909399;
          font-weight: bold;
          display: flex;
          align-items: center;
          background: #F3F6FA;
          padding: 12px 0;
        }

        .table-content {
          color: #606266;
          border-left: 1px solid #EBEEF5;
          border-right: 1px solid #EBEEF5;

          .item {
            padding: 12px 0;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #EBEEF5;
          }
        }
      }
    }
  }
}

</style>
